<template>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="formData" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="上级部门" prop="parentId">
                <el-cascader
                    ref="cascader"
                    v-model="formData.parentId"
                    filterable
                    :options="depts"
                    :show-all-levels="false"
                    placeholder="部门"
                    :props="{ value: 'value', label: 'title',checkStrictly: true}"
                    size="small"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="formData.deptName" placeholder="部门名称" size="small" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="orderNum">
                <el-input-number v-model="formData.orderNum" :min="0" size="small"></el-input-number>
            </el-form-item>
            <el-form-item label="负责人" prop="leader">
                <el-input v-model="formData.leader" placeholder="负责人" size="small" />
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="formData.phone" placeholder="电话" size="small" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="formData.email" placeholder="邮箱" size="small" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status" size="small">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm('formData')"
                :disabled="loading"
                :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
                size="mini"
            >确 定</el-button>
            <el-button @click="open = false" size="mini">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getDeptList, saveDept } from "@/api/system";
import { stringify } from "querystring";
const ERR_OK = 200;
export default {
    data() {
        return {
            formData: {},
            open: false,
            rules: {
                parentId: [
                    {
                        required: true,
                        message: "请选择上级部门",
                        trigger: "change"
                    }
                ],
                deptName: [
                    {
                        required: true,
                        message: "请输入部门名称",
                        trigger: "blur"
                    }
                ],
                orderNum: [
                    {
                        required: true,
                        message: "请输入显示顺序",
                        trigger: "blur"
                    }
                ]
            },
            loading: false,
            title: "",
            depts: []
        };
    },
    methods: {
        add(deptId) {
            this.loadDeptList();
            this.formData = {
                parentId: deptId ? deptId.toString() : "0",
                deptName: "",
                orderNum: "",
                leader: "",
                phone: "",
                email: "",
                status: "0",
                ancestors: deptId ? "" : "0"
            };
            this.open = true;
        },
        edit(row) {
            this.loadDeptList();
            this.formData = {
                deptId: row.deptId,
                parentId: row.parentId.toString(),
                deptName: row.deptName,
                orderNum: row.orderNum,
                leader: row.leader,
                phone: row.phone,
                email: row.email,
                status: row.status
            };
            this.open = true;
        },
        loadDeptList() {
            this.depts = [{ key: "0", value: "0", title: "无" }];
            getDeptList().then(res => {
                this.buildtree(res.data.rows, this.depts, 0);
            });
        },
        buildtree(list, arr, parentId) {
            list.forEach(item => {
                if (item.parentId === parentId) {
                    var child = {
                        key: item.deptId,
                        value: item.deptId + "",
                        title: item.deptName,
                        children: []
                    };
                    this.buildtree(list, child.children, item.deptId);
                    if (child.children.length === 0) {
                        delete child.children;
                    }
                    arr.push(child);
                }
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loading = true;
                    let formData = JSON.parse(JSON.stringify(this.formData));
                    if (formData.parentId instanceof Array) {
                        formData.parentId = this.formData.parentId[
                            this.formData.parentId.length - 1
                        ];
                    }
                    saveDept(formData).then(res => {
                        this.loading = false;
                        if (res.data.code === ERR_OK) {
                            this.$message.success(res.data.msg);
                            this.$emit("ok");
                            this.open = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.el-select,
.el-cascader {
    width: 100%;
}
</style>